<script setup lang='ts'>
import { onMounted, ref, computed } from "vue";
import { Api } from "../../assets/api/api";
import { useRouter } from "vue-router";
import {useStoriesStore} from "@/stores/index"
import {storeToRefs }from 'pinia'

const money = ref(0);
// //检测vip是否开启
// const getVip = ref(false);
//获取账号
const getAccount = ref("");

// vue3自带方法
const router = useRouter();

//获取书币
const getPrice = () => {
  if (JSON.parse(localStorage.getItem("LoginStatus") as any)) {
    money.value = JSON.parse(localStorage.getItem("price") as any);
  } else {
    money.value = 0;
  }
};
// 退出登录
const outLogin = () => {
  localStorage.setItem("LoginStatus", "false");
  router.push("/bookshelfv");
};
//获取vip状态 pinia 相关操作
const {vip} = storeToRefs(useStoriesStore());

// 获取账号信息
const getAccountInformation = () => {
  if (JSON.parse(localStorage.getItem("LoginStatus") as any)) {
    getAccount.value = JSON.parse(
      localStorage.getItem("user_information") as any
    )[0].account;
  } else {
    getAccount.value = "未登录";
  }
};
// 修改密码
const changePassword = () => {
  if (JSON.parse(localStorage.getItem("LoginStatus") as any)) {
    router.push("/changepassword");
  } else {
    getAccount.value = "未登录";
  }
};
//跳转vip页
const goVip = () =>{
  router.push("/vip");
}

onMounted(() => {
  getPrice();
  getAccountInformation();
});
</script>

<template>
  <div class="personalCenter_view">
    <nav>
      <div @click="$router.go(-1)" class="app"></div>
      <h1>个人中心</h1>
      <div class="sourch">
        <p @click="router.push('/bookshelfv')">书架</p>
      </div>
    </nav>
    <!-- 用户账号头像 -->
    <div class="user_accounts_head">
      <div class="img">
        <van-image width="48" height="48" src="/img/home/headPhoto_pv.jpg" />
      </div>
      <p>{{ getAccount }}</p>
    </div>
    <!-- 书币 -->
    <ul class="user_money">
      <li @click="router.push('/voucherCenter')">
        <p>{{ money }}</p>
        <span>书币</span>
      </li>
      <li>
        <p>0</p>
        <span>礼卷</span>
      </li>
    </ul>
    <!-- 账号 vip -->
    <ul class="function">
      <li>
        <div class="img">
          <van-image width="18" height="18" src="/img/home/account.png" />
        </div>
        <p>账号ID：{{ getAccount }}</p>
        <div class="switch_account">
          <span>切换账号</span>
        </div>
      </li>
      <li>
        <div class="img">
          <van-image width="18" height="18" src="/img/home/month.png" />
        </div>
        <p>
          VIP包月： <span class="span">{{ vip ? "已开通" : "未开通" }}</span>
        </p>
        <button @click="goVip">{{ vip ? "续费" : "开通" }}</button>
      </li>
    </ul>
    <!-- 用户消费问题 -->
    <ul class="function con">
      <li>
        <div class="img">
          <van-image width="18" height="18" src="/img/home/money.png" />
        </div>
        <p>充值记录</p>
        <div class="switch_account">
          <span></span>
        </div>
      </li>
      <li>
        <div class="img">
          <van-image width="18" height="18" src="/img/home/shoppingCar.png" />
        </div>
        <p>消费记录</p>
        <div class="switch_account">
          <span></span>
        </div>
      </li>
      <li @click="changePassword">
        <div class="img">
          <van-image width="18" height="18" src="/img/home/amend.png" />
        </div>
        <p>修改密码</p>
      </li>
      <li @click="outLogin">
        <div class="img">
          <van-image width="18" height="18" src="/img/home/exit.png" />
        </div>
        <p>退出登录</p>
      </li>
    </ul>

    <br /><br />

    <footer>
      <p>©2022天浪小说</p>
      <!-- <p>京ICP备 11009265号-5</p> -->
    </footer>
  </div>
</template>

<style lang="scss" scoped>
nav {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  border-bottom: 1px solid #e4e4e4;
  .app {
    width: 36px;
    height: 36px;
    background: url("/public/img/personalCenter/left.png") no-repeat 12px 0px;
    background-size: 18px 18px;
    margin-top: 13px;
    padding-left: 11px;
    padding-right: 44px;
  }
  h1 {
    font-size: 18px;
    color: #333333;
    padding-top: 12px;
    padding-bottom: 10px;
    font-weight: normal;
  }
  .sourch {
    display: flex;
    width: 60px;
    padding-right: 20px;
    justify-content: flex-end;
    align-items: center;
    p {
      font-size: 14px;
      color: #333;
    }
    .img {
      width: 16px;
      height: 16px;
      background: url("/public/img/home/search.png") no-repeat center center;
      background-size: cover;
    }
  }
}
.user_accounts_head {
  height: 108px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .img {
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    top: -8px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  p {
    font-size: 12px;
    color: #333;
  }
}
.user_money {
  display: flex;
  background-color: #fff;
  border-bottom: 1px #d3d3d3 solid;
  li {
    -webkit-box-flex: 1;
    width: 50%;
    text-align: center;
    padding-bottom: 17px;
    font-size: 18px;
    color: #555;
    &:nth-of-type(1) {
      border-right: 1px #e6e6e6 solid;
    }
    span {
      font-size: 12px;
      color: #aaa;
    }
  }
}
.function {
  padding: 0 20px;
  background-color: #f5f5f5;
  margin-bottom: 5px;
  &.con {
    border-bottom: 1px solid #e4e4e4;
  }
  li {
    position: relative;
    height: 54px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
    &:nth-last-of-type(1) {
      border-bottom: none;
    }
    .img {
      margin-right: 10px;
    }
    p {
      position: relative;
      top: -2px;
      color: #333;
      font-size: 14px;
    }
    .span {
      color: #aaa;
    }
    .switch_account {
      position: absolute;
      width: 56px;
      height: 54px;
      line-height: 54px;
      padding-right: 15px;
      font-size: 14px;
      color: #aaa;
      right: 0;
    }
    button {
      width: 70px;
      height: 30px;
      border: 1px #f54b41 solid;
      color: #f54b41;
      border-radius: 3px;
      font-size: 14px;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
  }
}
footer {
  p {
    text-align: center;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
  }
}
</style>